<template>
  <view class="swiper-wrap" :style="{height: height+'px'}">
		<swiper :interval="300" class="swiper-container" :current="currentIndex" @change="handleChange">
			<swiper-item v-for="(swiperItem, swiperIndex) of swiper" :key="swiperIndex">
				<scroll-view class="scroll">
					<mescroll-uni :top="0" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp" >
						<view class="list">
							<view class="item" v-for="(item, index) of list" :key="index">
								<image :src="item.img"></image>
								<view class="info">
									<view class="name">{{item.name}}</view>
									<view class="price">{{item.price}}元</view>
								</view>
								<view class="buy">购买</view>
							</view>
						</view>
					</mescroll-uni>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MescrollUni from "../../../components/mescroll-uni/mescroll-uni.vue";
export default {
  name: 'swiper',
  props: {
    height: {
      type: Number,
      default: 1
    },
		currentIndex: {
		  type: Number,
		  default: 0
		}
  },
  components: {
    MescrollUni
  },
  data() {
    return {
			list: [
				{
					img: '/static/images/mess/food3.jpg',
					price: '8.00',
					name: '黄瓜'
				},
				{
					img: '/static/images/mess/food4.jpg',
					price: '8.00',
					name: '西红柿炒鸡蛋'
				},
				{
					img: '/static/images/mess/food1.jpg',
					price: '18.00',
					name: '茶树菇'
				},
				{
					img: '/static/images/mess/food2.jpg',
					price: '18.00',
					name: '炒豆角'
				}
      ],
			swiper: [0,1,2,3,4],
      downOption: {
			  use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
			},
			upOption: {
			  auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        empty: {
          tip: '暂无相关数据'
        }
			}
    }
  },
  methods: {
     // 上拉
    pullUp(mescroll) {
      console.log('上拉')
			mescroll.endSuccess()
    },
    // 刷新
    pullRefresh(mescroll) {
      console.log('刷新')
      setTimeout(() => {
        mescroll.endSuccess()
      }, 2000)
    },
		handleChange(e) {
			const index = e.detail.current
			this.$emit('update:currentIndex', index)
		}
  }
}

</script>
<style lang='scss' scoped>
.swiper-wrap{
  width: 100%;
	.swiper-container{
		width: 100%;
		height:100%;
		.scroll{
			width: 100%;
			height: 100%;
			.list{
				width: 100%;
				padding: 0 20upx 20upx;
				box-sizing: border-box;
			}
		}
		.item{
			width:100%;
			background:rgba(240,240,240,1);
			border-radius:21px;
			padding:30upx 42upx;
			margin-bottom: 20upx;
			box-sizing: border-box;
			position: relative;
			display: flex;
			image{
				width:229upx;
				height:156upx;
				background: #000;
				margin-right: 20upx;
			}
			.info{
				padding-top: 30upx;
				box-sizing: border-box;
				.name{
					font-size: 30upx;
					line-height: 50upx;
					color:#333;
				}
				.price{
					font-size: 38upx;
					line-height: 50upx;
					color:#F90000;
				}
			}
			.buy{
				position: absolute;
				top: 30upx;
				right:30upx;
				width:98upx;
				height:56upx;
				border:2upx solid rgba(44,109,210,1);
				border-radius:29upx;
				font-size: 25upx;
				color: #2C6DD2;
				line-height: 56upx;
				text-align: center;
			}
		}
	}
}
</style>